<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css"/>
    <link rel="stylesheet" href="fonts/iconfont.css"/>
</head>

<body>
<div id="app">
    <div class="container">
        <simple-grid :data-list="gridData" :columns="gridColumns" v-on:load-entry="loadCustomer"
                     v-on:delete-entry="deleteCustomer">
        </simple-grid>
    </div>

    <div class="container">
        <div class="form-group">
            <button @click="this.show = true">Create</button>
        </div>
    </div>

    <modal-dialog v-bind:show.sync="show">

        <header class="dialog-header" slot="header">
            <h1 class="dialog-title">{{ item.customerId ? 'Edit Customer - ' + item.contactName : 'Create New Customer'
                }}</h1>
        </header>

        <div class="dialog-body" slot="body">
            <div v-show="item.customerId" class="form-group">
                <label>Customer Id</label>
                <input type="text" v-model="item.customerId" disabled="disabled"/>
            </div>
            <div class="form-group">
                <label>Company Name</label>
                <input type="text" v-model="item.companyName"/>
            </div>

            <div class="form-group">
                <label>Contact Name</label>
                <input type="text" v-model="item.contactName"/>
            </div>

            <div class="form-group">
                <label>Phone</label>
                <input type="text" v-model="item.phone"/>
            </div>
            <div class="form-group">
                <label></label>
                <button @click="saveCustomer">Save</button>
            </div>
        </div>

    </modal-dialog>
</div>

<div id="help">
    <loading v-show="showLoading"></loading>
</div>

<template id="grid-template">
    <table>
        <thead>
        <tr>
            <th v-for="col in columns">
                {{ col.name | capitalize}}
            </th>
            <th>Delete</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(index,entry) in dataList">
            <td v-for="col in columns">
                <span v-if="col.isKey"><a href="javascript:void(0)" @click="loadEntry(entry[col.name])">{{
                    entry[col.name] }}</a></span>
                <span v-else>{{ entry[col.name] }}</span>
            </td>
            <td>
                <button class="btn-danger" @click="deleteEntry(entry)">delete</button>
            </td>
        </tr>
        </tbody>
    </table>
</template>

<template id="dialog-template">
    <div class="dialogs">
        <div class="dialog" v-bind:class="{ 'dialog-active': show }">
            <div class="dialog-content">
                <div class="close rotate">
                    <span class="iconfont icon-close" @click="close"></span>
                </div>
                <slot name="header"></slot>
                <slot name="body"></slot>
                <slot name="footer"></slot>
            </div>
        </div>
        <div class="dialog-overlay"></div>
    </div>
</template>

<template id="loading-template">
    <div class="loading-overlay">
        <div class="sk-three-bounce">
            <div class="sk-child sk-bounce1"></div>
            <div class="sk-child sk-bounce2"></div>
            <div class="sk-child sk-bounce3"></div>
        </div>
    </div>
</template>

<script src="../js/vue.min.js"></script>
<script src="../js/vue-resource.js"></script>
<script>
    Vue.component('simple-grid', {
        template: '#grid-template',
        props: ['dataList', 'columns'],
        methods: {
            loadEntry: function (key) {
                this.$dispatch('load-entry', key)
            },
            deleteEntry: function (entry) {
                this.$dispatch('delete-entry', entry)
            }
        }
    })

    Vue.component('modal-dialog', {
        template: '#dialog-template',
        props: ['show'],
        methods: {
            close: function () {
                this.show = false
            }
        }
    })
</script>
<script>
    var help = new Vue({
        el: '#help',
        data: {
            showLoading: false
        },
        components: {
            'loading': {
                template: '#loading-template',
            }
        }
    })
    Vue.http.interceptors.push((request, next) = > {
        help.showLoading = true
    next((response) = > {
        help.showLoading = false
    return response
    })
    ;
    })
    ;

    var demo = new Vue({
        el: '#app',
        data: {
            show: false,
            title: '',
            gridColumns: [{
                name: 'customerId',
                isKey: true
            }, {
                name: 'companyName'
            }, {
                name: 'contactName'
            }, {
                name: 'phone'
            }],
            gridData: [],
            apiUrl: 'http://211.149.193.19:8080/api/customers',
            item: {}
        },
        ready: function () {
            this.getCustomers()
        },
        methods: {
            closeDialog: function () {
                this.show = false
            },
            loadCustomer: function (customerId) {
                var vm = this
                vm.gridData.forEach(function (item) {
                    if (item.customerId === customerId) {
                        vm.$set('item', item)
                        vm.$set('show', true)
                        return
                    }
                })
            },
            saveCustomer: function () {
                this.item.customerId ? this.updateCustomer() : this.createCustomer()
                this.show = false
            },
            getCustomers: function () {
                var vm = this
                vm.$http.get(vm.apiUrl)
                        .then((response) = > {
                    vm.$set('gridData', response.data)
            })
            },
            createCustomer: function () {
                var vm = this
                vm.$http.post(vm.apiUrl, vm.item)
                        .then((response) = > {
                    vm.$set('item', {})
                vm.getCustomers()
            })
                this.show = false
            },
            updateCustomer: function () {
                var vm = this
                vm.$http.put(this.apiUrl + '/' + vm.item.customerId, vm.item)
                        .then((response) = > {
                    vm.getCustomers()
            })
            },
            deleteCustomer: function (customer) {
                var vm = this
                vm.$http.delete(this.apiUrl + '/' + customer.customerId)
                        .then((response) = > {
                    vm.getCustomers()
            })
            }
        }
    })
    demo.$watch('show', function (newVal, oldVal) {
        if (!newVal) {
            this.item = {}
        }
    })
</script>
</body>

</html>